<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            text-align: center;
        }
        canvas{
            border: 1px solid #000;
        }
    </style>
</head>
<body>
<canvas width="600" height="600"></canvas>
<!--鼠标按下获取坐标
    鼠标移动到哪里擦除哪里
    鼠标抬起

    ctx .clearRect(x,y,width,height)
-->
<script>
    var cas=document.querySelector("canvas");
    var ctx=cas.getContext("2d");
    ctx.fillRect(0,0,cas.width,cas.height)
    var isClear=false;
    cas.onmousedown=function(e){
        isClear=true;
        ctx.beginPath();
    }
    cas.onmousemove=function(e){
        if(!isClear){
            return;
        }else{
            var x= e.offsetX;
            var y= e.offsetY;

            ctx .clearRect(x,y,20,20)
        }
    }
    cas.onmouseup=function(e){
        isClear=false;
    }
    cas.onmouseout=function(e){
        isClear=false;
    }

</script>



</body>
</html>